import Taro, { useDidShow } from '@tarojs/taro';
import { ReactNode, useState } from 'react';
import styles from './customTabBar.module.less';
import indexPNG from "./img/index.png";
import indexPNG_hover from "./img/index_hover.png";

import categoryPNG from "./img/category.png";
import category_hoverPNG from "./img/category_hover.png";

import shoppingCartPNG from "./img/shoppingCart.png";
import shoppingCart_hoverPNG from "./img/shoppingCart_hover.png";

import userPNG from "./img/user.png";
import userPNG_hover from "./img/user_hover.png";

import { Image, Text, View } from '@tarojs/components';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import utilsStore from '../../utils/utilsStore';

interface Iprops {
    children?: ReactNode
}

const tabs = [
    {
        icon: indexPNG,
        icon_hover: indexPNG_hover,
        text: '选款式',
        path: '/pages/Index/Index'
    },
    {
        icon: userPNG,
        icon_hover: userPNG_hover,
        text: '选花型',
        path: '/subPages/User/User'
    },
    {
        icon: userPNG,
        icon_hover: userPNG_hover,
        text: '订单',
        path: '/subPages/User/User'
    },
    {
        icon: userPNG,
        icon_hover: userPNG_hover,
        text: '用户中心',
        path: '/subPages/User/User'
    },
];

// 自定义导航栏 - 遵循规范：所有样式都必须写到对应的module.less文件中
const CustomTabBar = observer((props: Iprops) => {
    // const [shoppingCartNumber, setShoppingCartNumber] = useState(0);

    const [path, setPath] = useState("");
    // 计算安全区域的CSS变量值
    const safeAreaBottomValue = utilsStore.safeAreaBottom > 0 ? utilsStore.safeAreaBottom : "20rpx";

    return (
        <View
            className={clsx(
                styles.customTabBar,
                utilsStore.safeAreaBottom > 0 && styles.hasSafeArea
            )}
            style={{ paddingBottom: safeAreaBottomValue }}
        >
            <View className={styles.header} >
                {props.children}
            </View>

            <View className={styles.body} >
                {tabs.map((tab, index) => {
                    const icon = (path === tab.path) ? tab.icon_hover : tab.icon;
                    return <View
                        key={tab.path}
                        className={clsx(styles.tab_item, (path === tab.path) ? styles.active : '')}
                        onClick={() => {
                            console.log(tab.path);
                            console.log(tab.path?.startsWith("/pages"));

                            // 判断 tab.path 是 /pages开开头的
                            if (tab.path?.startsWith("/pages")) {
                                Taro.switchTab({ url: tab.path });
                            } else {
                                Taro.navigateTo({ url: tab.path })
                            }
                        }}
                    >
                        <Image
                            mode="heightFix"
                            src={icon}
                            className={styles.tab_icon}
                        />
                        {
                            tab.text === '购物车' && 1 > 0 &&
                            <Text className={styles.badge}>{1}</Text>
                        }
                        <View className={styles.tab_text}>{tab.text}</View>
                    </View>
                })}
            </View>
        </View >
    );
});

export default CustomTabBar;